<template>
<div class="shopcar-container">
   <div class="goods-list">
       <div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <form class="mui-input-group">
                <div class="mui-input-row mui-checkbox mui-left">
                    
                    <input name="checkbox" value="item.id" type="checkbox" @change="selectedChange(item.id,$store.getters.getGoodsSelected[item.id])" v-model="$store.getters.getGoodsSelected[item.id]">
                </div>
            </form>					         
            <img src="https://img.alicdn.com/imgextra/i2/883737303/O1CN0123oovmrhP4Ob3ul_!!883737303.jpg_430x430q90.jpg" alt="">
                <div class="info">
                    <h1>{{item.title}}</h1>
                    <p>
                        <span class="price">￥{{item.sell_price}}</span>
                        <numbox :initCount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                        <a href="#" @click.prevent="remove(item.id, i)">删除</a>
                    </p>
                </div>
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
                            <p>总计(不含邮费)</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}} 件</span>总价:<span class="red">￥:{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>

   </div>
</div>
</template>

<script>
//导入子组件
import numbox from "../subcomponents/shopcar_numbox.vue";
export default {
  data() {
    return {
      goodslist: []
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      var idArr = [];
      this.$store.state.car.forEach(item => idArr.push(item.id));
      if (idArr.length <= 0) {
        return;
      }
      console.log(idArr);
      this.$http
        .get("api/goods/getshopcarlist/" + idArr.join(","))
        .then(result => {
          console.log(result.body);
          if (result.body.status === 0) {
            result.body.message.forEach(item=>{
              item.img=item.img.replace("com","com/")
            })
            this.goodslist = result.body.message;
          } else {
            this.goodslist = JSON.parse(localStorage.getItem("car") || "[]");
          }
        });
    },
    remove(id, index) {
      this.goodslist.splice(index, 1);
      //调用store中的removeFromCar
      this.$store.commit("removeFromCar", id);
    },
    selectedChange(id,val) {
        //根据商品的id把商品的状态同步到store
      //console.log(this.$store.getters.getGoodsSelected[id]);
      this.$store.commit('updateGoodsSelected', {id,selected:val})
    }
  },
  components: {
    numbox
  }
};
</script>
<style lang="scss" scoped>
.shopcar-container {
  background-color: #eee;
  overflow: hidden;
  .mui-checkbox.mui-left input[type="checkbox"],
  .mui-radio.mui-left input[type="radio"] {
    left: 0px;
  }
  .mui-input-row.mui-checkbox.mui-left {
    width: 40px;
  }
  .goods-list {
    .mui-card-content-inner {
      display: flex;
      align-items: center;
    }
    img {
      width: 60px;
      height: 60px;
    }
    h1 {
      font-size: 13px;
    }
    p {
      margin-top: 10px;
      margin-bottom: 0;
    }
    .info {
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
  .jiesuan {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .red {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>


